<template>
  <div>
    <a-card class="card" title="站点列表" :bordered="false">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="4" :md="8" :sm="24">
            <a-form-item>
              <a-input
                v-decorator="[ 'branchName',{rules: [{ required: true, message: '请填写站点名称'}]}]"
                placeholder="站点名称"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="4" :md="8" :sm="24">
            <a-form-item>
              <a-input
                v-decorator="[ 'branchPass',{rules: [{ required: true, message: '请填写站点密码'}]}]"
                placeholder="站点密码"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="8" :sm="24">
            <a-form-item>
              <a-button htmlType="submit" type="primary">添加站点</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        :columns="columns"
        :rowKey="branchList => branchList.id"
        :dataSource="branchList"
        :loading="loading"
      >
        <span slot="code" slot-scope="row">{{ row.bra_id + 10000 }}</span>
        <div slot="action" slot-scope="row">
          <router-link :to="{path:'/command/branch-jd', query:{id:row.bra_id}}">
            <a-button type="link">分配京东账号</a-button>
          </router-link>
          <a-button @click="delBranch(row.bra_id)" type="link">删除</a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getList, addBra, delBra } from '@/api/command/branch'
const columns = [
  {
    title: '站点名称',
    dataIndex: 'bra_name'
  },
  {
    title: '注册邀请码',
    scopedSlots: { customRender: 'code' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'AdminUser',
  data () {
    return {
      description: '所有分站管理',
      columns,
      loading: false,
      branchList: [],
      form: this.$form.createForm(this)
    }
  },
  created () {
    this.getBranchList()
  },
  methods: {
    getBranchList () {
      getList()
        .then(res => {
          this.loading = false
          this.branchList = res.result
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    delBranch (branchId) {
      delBra({ branchId: branchId })
        .then(res => {
          this.$message.success(res.message)
          this.loading = false
          this.getBranchList()
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          addBra(values)
            .then(res => {
              this.$message.success(res.message)
              this.loading = false
              this.getBranchList()
            })
            .catch(() => {
              this.loading = false
              console.log('null')
            })
        }
      })
    }
  }
}
</script>
